<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改课程页面</title>
    <script src="js/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <link href="element-ui@2.15.14/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="js/vue@2.js"></script>
    <script src="element-ui@2.15.14/lib/index.js"></script>
    <script src="js/util.js" type="text/javascript"></script>
    <style type="text/css">
        #app {
            border-radius: 4px;
            width: 30vw;
            margin: 5rem auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center;margin-bottom: 2rem;font-size: 25px;font-weight: bold">修改课程页面</div>
    <form>
        <div class="form-item">
            课程ID：
            <el-input
                    clearable
                    disabled="true"
                    name="courseId"
                    v-model="courseId">
            </el-input>
        </div>
        学科名：
        <el-input
                clearable
                name="courseName"
                placeholder="请输入学科名"
                v-model="courseName">
        </el-input>
        <div class="mt-4">
            <el-button id="modifyCourse" type="primary">修改</el-button>
            <el-button onclick="goBack()" type="primary">返回</el-button>
        </div>
    </form>
</div>


<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            courseName: "",
            courseId: ""
        }
    })
    if (!isLogin()) {
        app.$message.error("您没有登录")
        setTimeout(() => {
            location.href = 'login.html'
        }, 500)
    }
    if (!isAdmin()) {
        app.$message.error("您无权操作")
        setTimeout(() => {
            location.href = 'index.html'
        }, 500)
    }


    function goBack() {
        window.location = "courseList.html"
    }

    let id = getParameter(location.href, "id")
    getCourse(id)
    $(function () {
        $("#modifyCourse").click(function () {
            $.ajax({
                url: "course?action=doModify",
                type: "post",
                data: {
                    name: app.$data.courseName,
                    courseId: app.$data.courseId
                },
                success: function (res) {
                    res = JSON.parse(res);
                    if (res.code == 1) {
                        app.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        setTimeout(() => {
                            window.location = "/courseList.html";
                        }, 500)
                    } else {
                        app.$message.error(res.msg)
                    }
                }
            })
        })
    })

    function getCourse(id) {

        $.ajax({
            url: "course?action=getCourse",
            type: "post",
            data: {courseId: id},
            success: function (res) {
                res = JSON.parse(res);
                if (res.code == 1) {
                    app.$data.courseId = res.data.id;
                    app.$data.courseName = res.data.name;
                } else {
                    app.$message.error(res.msg)
                }
            }
        })
    }
</script>
</body>
</html>